<template>
	<!-- 特色商品 -->
	<view>
		<head-nav text-content="特色商品"></head-nav>
		<u-sticky>
			<view class="flex alignC">
				<u-search placeholder="搜索" animation="false" disabled mode="none"
					margin="30rpx" bg-color="#F4F4F4" color="#BCBCBC" shape="round" height="72"
					@click="toPage('/subPackages/search/search')" ></u-search>
				<view class="cart_img flex alignC" @click="toPage('/subPackages/cart/cart')">
					<view class="cart_tag">{{ cartListNum }}</view>
					<image src="/static/cart.png" mode=""></image>
				</view>
			</view>
		</u-sticky>
		<view class="goods">
			<u-tabs :list="goodsTypeList" :current="active" height="60" :show-bar="false" @change="changeActive()" 
				inactive-color="#999" active-color="#303133"></u-tabs>
			<!-- 商品展示开始 -->
			<view class="goods-box" style="padding-bottom: 50rpx;" v-if="goodsList.length">
				<u-waterfall v-model="goodsList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="waterfall-item-left" v-for="(item, index) in leftList" :key="item.id"
							@click="toMallItemlDetail(item)">
							<u-lazy-load threshold="-450" :image="item.images[0].url" :index="index" :height="275"
								:img-mode="aspectFill" style="border-radius: 16rpx">
							</u-lazy-load>
							<view class="demo-title" style="padding: 16rpx;">
								{{item.name}}
							</view>
							<view class="price-cart">
								<view style="color:#FA3534;">
									<text style="font-size: 26rpx;">￥</text>
									<text style="font-size: 34rpx;">{{item.minPrice}}</text>
								</view>

								<image @click.stop="addCart(item)" style="width: 48rpx;height: 48rpx;"
									src="/static/icon_add_cart.png"></image>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="waterfall-item-right" v-for="(item, index) in rightList" :key="item.id"
							@click="toMallItemlDetail(item)">
							<u-lazy-load threshold="-450" :image="item.images[0].url" :index="index" :height="336"
								:img-mode="aspectFill" style="border-radius: 16rpx">
							</u-lazy-load>
							<view class="demo-title" style="padding: 16rpx;">
								{{item.name}}
							</view>
							<view class="price-cart">
								<view style="color:#FA3534;">
									<text style="font-size: 26rpx;">￥</text>
									<text style="font-size: 34rpx;">{{item.minPrice}}</text>
								</view>
								<image @click.stop="addCart(item)" style="width: 48rpx;height: 48rpx;"
									src="/static/icon_add_cart.png"></image>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<view class="empty_box" v-else>
				<image src="/static/empty_img.png" mode=""></image>
				<text>暂无内容</text>
			</view>
		</view>
	</view>
</template>

<script>
	import headNav from '@/components/HeadNav.vue';
	import {
		mapState
	} from 'vuex'
	import {
		getGoodsListApi,
		getGoodsClassApi
	} from '@/common/API/goodsApi.js'
	import {
		onLoad
	} from 'uview-ui/libs/mixin/mixin';
	import {
		addCartApi,
		getCartListApi,
	} from '@/common/API/cartApi.js'
	export default {
		components: {
			headNav
		},
		data() {
			return {
				goodsList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				active: 0,
				goodsTypeList: [],
				showList: [],
				isLogin: false,
				tabLists: [],
				current: 0,
				cartListNum: 0
			}
		},
		computed: {
			...mapState('user', ['ylEnterprise'])
		},
		methods: {
			gotoSearch() {
				uni.navigateTo({
					url: '/subPackages/search/search'
				})
			},
			async getGoodsClass() {
				const res = await getGoodsClassApi()
				if (res.status === 200) {
					res.data.forEach(item => {
						if (item.children) {
							item.children.forEach(item2 => this.goodsTypeList.push(item2))
						} else {
							this.goodsTypeList.push(item)
						}
					})
				} else {
					uni.$showMsg(res.message)
				}
			},
			async getGoodsList() {
				const res = await getGoodsListApi({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					salesType: '1',
					categoryId: this.goodsTypeList[this.active].id,
					// 销售类型0-批发1-零售
					enterpriseCode: this.ylEnterprise.enterpriseCode
				})
				this.goodsList.push(...res.data.records)
				this.total = res.data.total
			},
			async changeActive(index) {
				console.log('下表', index)
				// await this.$refs.uWaterfall.clear();
				this.active = index
				this.goodsList = []
				this.total = 0
				this.pageNum = 1
				await this.getGoodsList()
				// this.goodsTypeList.forEach((item, index) => {
				// 	if (index === this.active) {
				// 		this.showList = this.goodsList.filter(item2 => item2.categoryId === item.id)
				// 	}
				// })
			},
			toGoodDetail(code) {
				uni.navigateTo({
					url: `/subPackages/goodsDetail/goodsDetail?code=${code}`
				})
			},
			
			toMallItemlDetail(item) {
				uni.navigateTo({
					url: `/subPackages/mallItemDetial/mallItemDetial?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			async addCart(item) {
				const res = await addCartApi({
					number: 1,
					commodityCode: item.productAttrValues[0].skuCode,
					commodityName: item.name,
					integral: item.integral || '',
					uniqueId: item.code,
					itemArr: item.productAttrValues[0].skuValue,
					picUrl: item.images[0].url || '',
					price: item.minPrice,
					enterpriseCode: this.ylEnterprise.enterpriseCode,
					enterpriseName: this.ylEnterprise.enterpriseName,
					isGroupBuying: item.salesType == '2' ? 0 : 1, //0团购				
				})
				if (res.status == 200) {
					uni.$showMsg('添加到购物车')
					this.navShow = false
					this.getCartList()
				}
			},
			async getCartList() {
				const res = await getCartListApi(this.ylEnterprise.enterpriseCode)
			
				if (res.status == 200) {
					this.cartList = res.data || []
					console.log('购物车信息', JSON.stringify(this.cartList))
			
					if (this.cartList.length > 0) {
						this.cartListNum = this.cartList.length.toString()
						// console.log('购物车商品数', JSON.stringify(this.cartList.length))
						// uni.setTabBarBadge({
						// 	index: 2,
						// 	text: this.cartList.length.toString()
						// })
					} else {
						this.cartListNum = 0
						// console.log('购物车没数据了')
						// uni.removeTabBarBadge({
						// 	index: 2
						// })
					}
				}
			}
		},
		async onLoad() {
			if (uni.getStorageSync('changeEnterprise') || this.goodsList.length == 0 || this.goodsTypeList.length ==
				0) {
				Object.assign(this.$data, this.$options.data())
				await this.getGoodsClass()
				await this.getGoodsList()
				// await this.changeActive(0)
				uni.setStorageSync('changeEnterprise', false)
			}
			this.getCartList()
		},
		onShow() {
			if (!uni.getStorageSync('ylToken')) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
		
		},
		onReachBottom() {
			if (this.goodsList.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			this.getGoodsList()
		}
	}
</script>


<style lang="scss" scoped>
	.u-wrap{
		border-radius: 16rpx !important;
	}
	/deep/.u-lazy-item{
		border-top-left-radius: 16rpx !important;
		border-top-right-radius: 16rpx !important;
	}
	.cart_img {
		position: relative;
		image {
			width: 72rpx;
			height: 72rpx;
		}
		.cart_tag{
			position: absolute;
			top: 0;
			right: 0;
			width: 28rpx;
			height: 28rpx;
			line-height: 28rpx;
			text-align: center;
			background: #FA3534;
			color: #fff;
			font-size: 20rpx;
			border-radius: 28rpx;
		}
	}

	/deep/.u-search {
		width: 590rpx;
	}

	.goods-box {
		margin-bottom: 16rpx;

		.empty_box {
			image {
				width: 335rpx;
				height: 275rpx;
			}

			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

		}
	}

	.waterfall-item-left {
		margin-left: 32rpx;
		margin-right: 12rpx;
	}

	.waterfall-item-right {
		margin-left: 12rpx;
		margin-right: 32rpx;
	}

	.waterfall-item-right,
	.waterfall-item-left {
		background-color: white;
		margin-top: 24rpx;
		padding-bottom: 16rpx;
		border-radius: 16rpx;

		/deep/ u-lazy-load {
			.u-wrap {
				border-radius: 10rpx 10rpx 0rpx 0rpx !important;
			}
		}
	}

	.price-cart {
		font-weight: 500;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 16rpx;
		margin-right: 16rpx;
		margin-top: 16rpx;
	}
</style>